<template>
	<SizeObserver class="bear-TextEllipsis"
				  @bear-resize="$_bear_resizeFn"
				  :style="style">{{webkit?value:(showValue+ellipsis)}}</SizeObserver>
</template>

<script>
	/* global utils */
	/**
	 * @author 唐国雄
	 * 文字省略
	 * 属性----------------------
	 * :value		内容
	 * :line		文字最大行数
	 * :nowrap		是否不换行
	 * :line-height	行高(不要通过css设置)
	 * 方法----------------------
	 */
	import SizeObserver from './SizeObserver';
	export default{
		name:'TextEllipsis',
		components:{
			SizeObserver
		},
		props:{
			line:{
				type:Number,
				default:1
			},
			value:String,
			nowrap:Boolean,
			lineHeight:{
				type:[String,Number],
				default:1.5
			}
		},
		data(){
			return {
				webkit:true,
				showValue:this.value,// 兼容ie
				lineHeightPx:0,// 兼容ie
				ellipsis:'',// 兼容ie
				width:0,
				enableTip:true
			};
		},
		computed:{
			style(){
				if(this.webkit){
					return {'-webkit-line-clamp':this.line,lineHeight:this.lineHeightPx+'px'};
				}else{
					const lineHeightPx=this.lineHeightPx;
					return {'max-height':this.line*lineHeightPx+'px',lineHeight:lineHeightPx+'px'};
				}
			},
			$_bear_tipWidthListener(){
				return [this.nowrap,this.width];
			}
		},
		watch:{
			value(val){
				this.tipInstance.setContent(val);
				this.$_bear_listener();
			},
			width(){
				this.$_bear_listener();
			},
			line(){
				this.$_bear_listener();
			},
			lineHeightPx(){
				this.$_bear_listener();
			},
			lineHeight:'calcLineHeightPx',
			$_bear_tipWidthListener(){
				this.tipInstance.setProps({
					maxWidth:this.nowrap?'none':this.width
				});
			},
			enableTip(val){
				if(val){
					this.tipInstance.enable();
				}else{
					this.tipInstance.disable();
				}
			}
		},
		created(){
			this.$_bear_listener=utils.debounced(function(){
				if(this.webkit){
					const el=this.$el;
					this.enableTip=el.scrollHeight>el.offsetHeight;
				}else{
					this.showValue=this.value;
					this.ellipsis='';
					this.$nextTick(function(){
						const el=this.$el;
						if(el.scrollHeight>el.offsetHeight){
							this.ellipsis='...';
							this.$_bear_notWebkit(1,this.showValue.length);
							this.enableTip=true;
						}else{
							this.enableTip=false;
						}
					});
				}
			},0);
		},
		mounted(){
			const el=this.$el;
			this.tipInstance=utils.tippy(el,{
				content:this.value,
				animation:'scale',
				hideOnClick:false,
				ignoreAttributes:true
			});
			this.webkit=typeof el.style['-webkit-line-clamp']==='string';
			this.calcLineHeightPx(this.lineHeight);
		},
		beforeDestroy(){
			this.tipInstance.destroy();
		},
		methods:{
			// 二分法,计算实际最大显示内容
			$_bear_notWebkit(min,max){
				if(max-min>1){
					const mid=Math.floor((max+min)/2);
					this.showValue=this.value.substring(0,mid);
					this.$nextTick(function(){
						const el=this.$el;
						if(el.scrollHeight>el.offsetHeight){
							this.$_bear_notWebkit(min,mid);
						}else{
							this.$_bear_notWebkit(mid,max);
						}
					});
				}else{
					this.showValue=this.value.substring(0,min);
				}
			},
			$_bear_resizeFn({width,height}){
				this.width=width;
			},
			calcLineHeightPx(lineHeight){
				if(typeof lineHeight==='number'){
					if(this.$el){
						const style=getComputedStyle(this.$el);
						this.lineHeightPx=Math.ceil(lineHeight*parseFloat(style.fontSize));
					}else{
						this.lineHeightPx=0;
					}
				}else{
					this.lineHeightPx=Math.ceil(parseFloat(lineHeight));
				}
			}
		}
	};
</script>

<style lang="scss">
	.bear-TextEllipsis{
		display:-webkit-box;
		overflow:hidden;
		text-overflow:ellipsis;
		-webkit-box-orient:vertical;
		word-break:break-word;
		word-wrap:break-word;
	}
</style>
